<template>
  <div class="confirm">
<van-notice-bar mode="closeable" color="#999999" background="#FFF5E6" left-icon="warning">
   <span class="wuliutixing">受疫情影响,新疆地区到货时效延长3-7天,大家电产品因疫情防控暂无法发出，给您带来不便，还请谅解。</span>
   </van-notice-bar>
  <div class="songhuodizhi">
    <div class="shouhuodizhixiao">
      <p class="p1"><span> 浙江省杭州市西湖区文三路 138 号</span></p>
      <p class="p2">东方通信大厦 7 楼 501 室收
      <span class="p2s1"><van-icon name="arrow" @click="$router.push('/shouhuodizhi')"/></span>
        </p>
      <span>张三&nbsp;&nbsp;13000000000</span>
    </div>
  </div>
  <!-- 选购商品 -->
  <div class="xuangoushangpin">
 <van-card
      v-for="prod in handleNa"
      :key="prod.id"
      :num="prod.amount"
      :price="prod.price"
      :desc="prod.title"
      :title="prod.title"
      :thumb="prod.image"
    />
  </div>
  <div class="yunfeida">
  <div class="yunfei">
    <p class="yunfei1">运费<span class="youjiantou1">￥0</span></p>
    <p class="pyouhuijuan">优惠券
      <span class="youjiantou">无可用<van-icon name="arrow" /></span>
        </p>
  </div>
  </div>
<!-- 发票 -->
<div class="fapiaoda">
 <div class="fapiao">
 <p class="fapiaoxxiao">发票
      <span class="youjiantou">电子普通发票-个人<van-icon name="arrow" /></span>
        </p>
 </div>
</div>
<div class="dibu"></div>
<van-submit-bar :price="totalCheckedMoney * 100" button-text="去付款" @submit="$router.push('/querendingdan')" />
  </div>

</template>

<script>
export default {
  name: 'Confirm',
  data() {
    return {
      activeName: '1',
    }
  },
  computed: {
    handleNa() {
      return this.$store.getters['cart/cart'].filter(function(element) { return element.checked })
    },
    totalCheckedMoney() {
      return this.$store.getters['cart/totalCheckedMoney']
    },
  },

}
</script>

<style lang="less" scoped>
.wuliutixing{
  font-size: 14px;
  color: red;
}
.confirm{
  background-color: #F6F6F6;
}
.songhuodizhi{
  margin: 15px;
  width: 345px;
  height: 130px;
  background-color: #fff;
  .p{
    font-size: 14px;
    color: #666666;
    text-align: left;
    line-height: 28px;
  }
  .p2{
    font-size: 20px;
    font-weight: 700;
  }
  .p2s1{
    margin-left: 50px;
  }
}
.xuangoushangpin{
  // margin: 15px;
  padding: 15px;
  width: 345px;
  .van-card{
    background-color: #fff;
  }
}
.yunfeida{
  // padding: 15px;
  margin-left: 15px;
  margin-top: 30px;
  font-size: 14px;
.yunfei{
  // padding: 15px;
  width: 345px;
  height: 80px;
  background-color: #fff;
  .youjiantou{
  float: right;
  height: 30px;
  color: #ccc;
}
.youjiantou1{
  float: right;
  margin-right: 15px;
}
}
}
.yunfei1{
  height: 30px;
  line-height: 30px;
}
.pyouhuijuan{
  height: 30px;
  line-height: 30px;
}
.fapiaoda{
  width: 345px;
  height: 40px;
  line-height: 40px;
  background-color: #fff;
  font-size: 14px;
  margin: 15px;
  .youjiantou{
  float: right;
  // height: 30px;
  color: #ccc;
  font-size: 12px;
}
}
.dibu{
  color: #F6F6F6;
  height: 150px;

}

</style>
